<template>
    <div class="index">
      <div class="index-header">
        <div style="float: left;margin-left: 2%">
          <span class="title">
            申泓自动化办公平台
            <b>1.0</b>
          </span>
        </div>
        <div style="float: left;margin-left: 5%;position: relative">
          <a href="javascript:void(0)" @click="jump('/index')" style="height:100%;line-height: 100%;padding-right: 20px">首页</a>
          <Badge :count="getCount" class-name="tztg">
            <a href="javascript:void(0)" style="padding-right: 18px" @click="showNotic" >通知通告</a>
          </Badge>
          <div v-if="show" class="index-notice-ul">
            <p class="c">
              <Icon style="cursor: pointer" @click="hiddenNotice" type="ios-backspace" size="30"/>
            </p>
            <div style="width: 100%;height: 85%;overflow: hidden;margin-top: 6px">
              <div style="overflow-y:scroll;width: 106%;height: 100%;text-align: left;">
                <ul class="inotice-ul">
                  <div v-if="noticeList.length>0">
                    <li v-for="(item,key) in noticeList" :key="key">
                      <div>
                        <span class="iul-label">{{key+1}}</span>
                        <a class="ili-font" href="javascript:void(0)" @click="read(item)">{{item.noticeTitle}}</a>
                        <span style="position:absolute;right: 4%;color: gray">{{item.createTime.substring(0,10)}}</span>
                      </div>
                    </li>
                  </div>
                  <div v-else>
                    <li >
                      <div>
                        <span class="ili-font" >暂无未读的通告信息</span>
                      </div>
                    </li>
                  </div>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="header-right">
          <span style="margin-right: 10px"><Icon type="md-contact" size="30" /></span>
          <span>欢迎您：{{nickname}}</span>
          <a style="margin-left: 10px" href="javascript:void(0)" @click="addDrawer=true">修改密码</a>
          <a @click="logOut" style="padding-left:5px;border-left: 1px #515a6e solid" href="javascript:void(0)">退出登录</a>
        </div>
      </div>
      <div class="router-view">
        <router-view/>
      </div>
      <div class="footer" style="width: 100%">
        <span>Copyright © 成都申泓供水设备有限公司 2019</span>
      </div>
      <Drawer title="修改密码" :closable="false" v-model="addDrawer" width="30" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="140">
          <FormItem label="原密码：" prop="opassword">
            <Input type="password"  v-model="addForm.opassword" placeholder="请输入原密码..."></Input>
          </FormItem>
          <FormItem label="新的登录密码：" prop="password">
            <Input type="password" v-model="addForm.password" placeholder="请输入修改后的登录密码..."></Input>
          </FormItem>
          <FormItem label="确认登录密码：" prop="dpassword">
            <Input type="password" v-model="addForm.dpassword" placeholder="请再次输入修改后的登录密码..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  import {toGet} from "../utils/MyAxios";
  import md5 from 'js-md5';
    export default {
        name: "index",
        data() {
            return {
              nickname:'',
              show:false,
              addDrawer:false,
              loading:false,
              addForm:{},
              addRuleVal:{
                opassword: [
                  { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                password: [
                  { required: true, message: '请输入修改后的登录密码', trigger: 'blur' }
                ],
                dpassword: [
                  { required: true, message: '请再次输入修改后的登录密码', trigger: 'blur' }
                ],

              },
              noticeList:[],
            }
        },
        methods: {
          handleSubmit (name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                if(this.addForm.password!==this.addForm.dpassword){
                  this.$Notice.warning({
                    title: '两次密码不相同',
                    desc: '请确认一致后重试'
                  });
                }else{
                  this.loading=true;
                  let id=localStorage.getItem("userId");
                  let opwd=md5(this.addForm.opassword);
                  let pwd=md5(this.addForm.password);
                  toGet('/authentication/user/updatepwd/'+id+'/'+opwd+'/'+pwd)
                    .then(res=>{
                      if (res.resultCode === 0) {
                        this.$Notice.success({
                          title: '修改密码成功'
                        });
                        localStorage.setItem('password',md5(pwd));
                        this.$refs[name].resetFields();
                        this.addDrawer=false;
                      }else{
                        this.$Notice.error({
                          title: '修改密码失败',
                          desc: '请检查原密码是否正确'
                        })
                      }
                    });
                  this.loading=false;
                }
              }
            })
          },
          handleReset (name) {
            this.addDrawer=false;
            this.updateDrawer=false;
            this.$refs[name].resetFields();
          },
          read(notice){
            this.$Modal.info({
              title: notice.noticeTitle,
              content: notice.noticeContent,
              okText:'标记已读',
              onOk: () => {
                toGet('/notice-information/notice/read/'+notice.id)
                  .then(res=>{
                    if(res.resultCode === 0) {
                      this.showNotic();
                    }else{
                      this.$Message.error('服务器发生意外错误');
                    }
                  });
              },
            });
          },
          logOut(){
            localStorage.clear();
            this.$router.push('/');
          },
          jump(e){
            this.$router.push(e);
          },
          toJump(e){
            console.log(e);
          },
          hiddenNotice(){
            this.show=false;
          },
          showNotic(){
            toGet('/notice-information/notice/allUnread/'+localStorage.getItem('userId'))
              .then(res=>{
                if (res.resultCode === 0) {
                  this.noticeList=res.data;
                  this.updateDrawer=true;
                  this.show=true;
                }else{
                  this.$Notice.warning({
                    title: '获取通告信息失败',
                    desc: '服务器发生未知错误'
                  });
                }
              });
          },
        },
        computed: {
          ...mapGetters(['menus']),
          getCount(){
            return this.noticeList.length;
          }
        },
        props: {},
        components: {},
        mounted() {
          this.nickname=localStorage.getItem('nickname');
          toGet('/notice-information/notice/allUnread/'+localStorage.getItem('userId'))
            .then(res=>{
              if (res.resultCode === 0) {
                this.noticeList=res.data;
              }else{
                this.$Notice.warning({
                  title: '获取通告信息失败',
                  desc: '服务器发生未知错误'
                });
              }
            });
        },
        created() {
        }
    }
</script>

<style lang="css" scoped>
  .demo-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
